Wprowadzenie

Tablice (arrays) są kontenerami danych, co znaczy, że można w nich umieszczać wiele wartości. Zbiór wartości tablicy nazywamy elementami tablicy.

Każdy element tablicy ma przypisany indeks, czyli numer reprezentujący jego pozycję w tablicy. Indeksy liczymy od zera, czyli pierwszy element będzie miał indeks 0. Co ważne, jest to aktualna pozycja w tablicy – przy zmianach zawartości tablicy mogą zmieniać się indeksy poszczególnych wartości.

Tablice stosujemy w sytuacjach, gdy potrzebujemy zbioru wartości, dla których nie potrzebujemy stałych kluczy (etykiet, nazw). Dobrym przykładem będzie każda sytuacja, w której będziemy iterować pętlą przez wszystkie elementy tablicy, ale nigdy (poza pętlą) nie będziemy potrzebowali uzyskać dostępu do pojedynczego elementu tablicy.

Tworzenie tablicy

Tablicę tworzymy za pomocą nawiasów kwadratowych [ ]. Możemy stworzyć pustą tablicę, lub od razu zapisać w niej elementy.

const categories = [];
console.log('categories:', categories); // categories: []

const keywords = ['travel', 'France'];
console.log('keywords:', keywords); // keywords: ['travel', 'France']Copy to clipboardErrorCopied

Standardowo tablicę będziemy zapisywać w stałej const, aby przez przypadek nie nadpisać całej tablicy. Nie jest to przeszkodą, aby zmieniać zawartość tablicy.

Dodawanie elementów do tablicy

Najczęstszą metodą dodawania wartości do tablicy jest push, która dodaje nowe wartości na końcu tablicy.

categories.push('animals');
console.log('categories:', categories); // categories: ['animals']

categories.push('travel');
console.log('categories:', categories); // categories: ['animals', 'travel']

keywords.push('Paris');
console.log('keywords:', keywords); // keywords: ['travel', 'France', 'Paris']Copy to clipboardErrorCopied

Liczba elementów w tablicy

Możemy łatwo sprawdzić, ile elementów znajduje się obecnie w tablicy za pomocą właściwości length.

const categoriesLength = categories.length;
console.log('categoriesLength:', categoriesLength); // categoriesLength: 2

const keywordsLength = keywords.length;
console.log('keywordsLength:', keywordsLength); // keywordsLength: 3Copy to clipboardErrorCopied

Odczytywanie elementów tablicy

Do odczytania pojedynczego elementu z tablicy użyjemy nazwy tablicy, do której dodamy nawiasy kwadratowe [ ] z indeksem elementu, który chcemy pobrać.

const firstCategory = categories[0];
console.log('firstCategory:', firstCategory); // firstCategory: animalsCopy to clipboardErrorCopied

Często jednak indeks nie jest podawany bezpośrednio, ale przechowywany w zmiennej. W tej sytuacji również używamy nawiasów kwadratowych [ ].

const indexOfSecondCategory = 1;
const secondCategory = categories[indexOfSecondCategory];
console.log('secondCategory:', secondCategory); // secondCategory: travelCopy to clipboardErrorCopied

Znajdowanie indeksu elementu

Kiedy chcemy sprawdzić, jaki indeks ma pewna konkretna wartość, możemy to zrobić za pomocą metody indexOf.

const indexOfTravel = categories.indexOf('travel');
console.log('indexOfTravel:', indexOfTravel); // indexOfTravel: 1
console.log('value at indexOfTravel:', categories[indexOfTravel]); // value at indexOfTravel: travelCopy to clipboardErrorCopied

Metoda indexOf przydaje się również do sprawdzenia, czy jakaś wartość znajduje się już w tablicy. Jeśli wartość nie zostanie znaleziona w tablicy, indexOf zwróci -1.

const indexOfCars = categories.indexOf('cars');
console.log('indexOfCars:', indexOfCars); // indexOfCars: -1Copy to clipboardErrorCopied

Usuwanie elementu

Jest kilka sposobów na usunięcie elementu z tablicy. Jednym z bardziej elastycznych jest metoda splice.

Składnia

const allRemovedValues = myArray.splice(startAtIndex, numberOfElements);Copy to clipboardErrorCopied

categories.push('fruits');
categories.push('food');
categories.push('phones');
console.log('categories:', categories); // categories: ['animals', 'travel', 'fruits', 'food', 'phones']

const indexOfFruits = categories.indexOf('fruits');
console.log('indexOfFruits:', indexOfFruits); // indexOfFruits: 2

const removedValues = categories.splice(indexOfFruits, 1);
console.log('removedValues:', removedValues); // removedValues: ['fruits']
console.log('categories:', categories); // categories: ['animals', 'travel', 'food', 'phones']

const indexOfFood = categories.indexOf('food');
console.log('indexOfFood:', indexOfFood); // indexOfFood: 2

categories.splice(indexOfFood, 2);
console.log('categories:', categories); // categories: ['animals', 'travel']Copy to clipboardErrorCopied

Generowanie tekstu z tablicy

W prosty sposób możemy wygenerować tekst, składający się z elementów tablicy, połączonych ze sobą dowolnym ciągiem tekstu (string). Wykorzystamy do tego metodę join.

const joinedText = keywords.join(', ');
console.log('joinedText:', joinedText); // joinedText: travel, France, ParisCopy to clipboardErrorCopied

Możemy wykorzystywać metodę join do szybkiego tworzenia kodu HTML, np.:

const html = '<ul><li>' + keywords.join('</li><li>') + '</li></ul>';
console.log('html:', html);
// html: <ul><li>travel</li><li>France</li><li>Paris</li><li>Eiffel Tower</li></ul>Copy to clipboardErrorCopied

Tworzenie tablicy z tekstu

Operacją odwrotną do join jest split – dzieli tekst na elementy tablicy, używając podanego ciągu znaków do podzielenia tekstu.

const subjects = 'cat, cactus, needle';
const subjectsArray = subjects.split(', ');
console.log('subjectsArray:', subjectsArray); // subjectsArray: ['cat', 'cactus', 'needle']Copy to clipboardErrorCopied

Iterowanie po tablicy (pętle)

Kiedy potrzebujemy wykonać jakieś operacje dla wszystkich elementów tablicy, możemy wykorzystać pętle for oraz for...of. Głównym czynnikiem wpływającym na wybór jednej z tych pętli jest kwestia indeksu – jeśli w pętli nie potrzebujemy korzystać z indeksu elementu, wygodniej będzie nam użyć pętli for...of.

Przykłady użycia pętli do iterowania po tablicach znajdziesz w rozdziale Pętle.

Tablice wielowymiarowe

Elementami tablicy mogą być np. liczby czy teksty, ale mogą to być również obiekty i tablice. Przykład takiej wielopoziomowej struktury danych znajdziesz w rozdziale o Obiektach.

Przydatne metody i właściwości

Rozmiar tablicy

Znajdowanie indeksu elementu

Dodawanie i usuwanie elementów

Zmiana kolejności elementów

Modyfikacja tablicy

Dzielenie i łączenie tablic

Konwersja tablicy na tekst